<!DOCTYPE HTML>
<html>
<head>
	<title>PHP exercise form - Einar David Roheim</title>
	<link rel='stylesheet' href='./css/styles.css' type='text/css' media='screen' />
	<script type="text/javascript" src="./js/jquery-1.4.4.min.js"></script>
	<script type="text/javascript">
	<!--
		function go() {
			$("#result").load("./xtractor.php", {
					urlstring:	$("#inputurl").val(), 
					htmlstring:	$("#inputhtml").val(),
					getlinks:	$("#chbxlinks").is(':checked'),
					getimages:	$("#chbximages").is(':checked')
				},
				function(response, status, xhr) {
					if (status == "error") {
						var msg = "There was an error: ";
						$("#error").html(msg + xhr.status + " " + xhr.statusText);
					} else {
						$("#error").html('');
					}
				}
			);
		}
	-->
	</script>
</head>
<body>
	<div id="container">
		<!-- Message Box -->
		<div class="inner-container">
			<div id="message-top" class="message-top-btm"></div>
			<div id="message-content">
				<div class="align-left">
					<img id="info-img" alt="Info picture" src="./images/info-icon.gif">
				</div>
				<p><strong>X-factor</strong> is a tool for extracting links and images from HTML.</p>
				<p>Either input the URL of a web page in the text field, or paste some HTML in the text box below.</p>
			</div>
			<div id="message-bottom" class="message-top-btm"></div>
		</div>
		<!-- Inputs -->
		<div class="inner-container">
			<form action="" method="post">
				<div class="form-title"><span>URL:</span></div>
				<div class="form-content"><input name="inputurl" id="inputurl" type="text" size="30" value="http://"></div>
				<div class="form-title" style="height: 95px;"><table height="100%"><tr><td><span>HTML:</span></td></tr></table></div>
				<div class="form-content"><textarea name="inputhtml" id="inputhtml" rows="5" cols="40"></textarea></div>
				<div class="form-title">&nbsp;</div>
				<div class="form-content">
					<input type="checkbox" value="1" name="chbxlinks" id="chbxlinks"><strong>X-tract links</strong><br />
					<input type="checkbox" value="1" name="chbximages" id="chbximages"><strong>X-tract images</strong>
				</div>
				<div class="clear-div"></div>
			</form>
		</div>
		<div id="action-line" class="inner-container">
			<a href="#" onclick="javascript:go(); return false;"><img alt="Go!" src="./images/go-button.gif" border="0"></a>
			<span id="go-text"><a href="#" onclick="javascript:go(); return false;">Go!</a></span>
		</div>
		<div id="result" class="inner-container">
		</div>
		<div id="error" class="inner-container" style="color: red;"></div>
	</div>
</body>
</html>